<template>
	<view>
		<u-navbar title="立即预约" bgColor="#3083FB" titleStyle="color:#fff" left-icon-color="#fff" :autoBack="true"
			placeholder></u-navbar>
		<view class="bgc"></view>
		<view class="body">
			<view class="header">
				<view  class="title">
					维修方式
				</view>
				<navigator url="/pages/CarRepair/ReservationDetail">预约详情</navigator>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="title">
				客户信息
			</view>
			<u-line color="red" />
			<view class="userMsg">
				<text class="label">车主姓名</text>
				<input type="text" placeholder="请输入车主姓名" />
				<text class="label">联系方式</text>
				<input type="text" placeholder="请输入联系方式" />
				<text class="label">预约时间</text>
				<input type="text" placeholder="请输入预约时间" />
				<template v-if="isShow">
				<text class="label">取车位置</text>
				<input type="text" placeholder="请输入取车位置" />
				</template>
				
			</view>
		</view>
		<view class="body">
			<view class="title">
				车辆信息
			</view>
			<view class="userMsg">
				<text class="label">车辆类型</text>
				<input type="text" placeholder="请输入车辆类型" />
				<text class="label">车牌号</text>
				<input type="text" placeholder="请输入车牌号" />
				
			</view>
		</view>
		<view class="body">
			<view class="title">
				照片
			</view>
			<view class="photo">
				<view class="uploadphoto">
					整车照片：
				</view>
				<view class="">
					<u-upload :action="action" :file-list="fileList" upload-text="上传图片"></u-upload>
				</view>
			</view>
			<view class="photo">
				<view class="uploadphoto">
					维修部为照片：
				</view>
				<view class="">
					<u-upload :action="action" :file-list="fileList" upload-text="上传图片"></u-upload>
				</view>
			</view>
		</view>
		<view class="submit">
			<u-button type="primary" shape="circle">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '到店维修',
						disabled: false
					},
					{
						name: '上门取车',
						disabled: false
					}
				],
				value: '到店维修',
				isShow:false,
				mobile: '',
				code: ''
			};
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				// console.log(e=='上门取车'); 
				this.isShow= e=='上门取车'
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.bgc {
		background-color: #3083FB;
		height: 300rpx;
		margin-top: -6rpx;
		padding-top: 6rpx;
		margin-bottom: -280rpx;
	}

	.body {
		background-color: #fff;
		padding: 30rpx;
		width: 85%;
		margin: 0 auto;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
	}

	.title {
		font-weight: bold;
		margin-bottom: 10rpx;
		font-size: 30rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
	}

	.userMsg {
		// width: 80%;
		margin-top: 40rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.label {
			display: inline-block;
			width: 20%;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			border-radius: 40rpx;
			background-color: #4FA2FF;
			font-size: 24rpx;
			color: #fff;
			margin-right: 20rpx;
		}

		input,
		textarea {
			font-size: 25rpx;
			width: 76%;
			height: 60rpx;
			border: 1rpx solid #ccc;
			border-radius: 30rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
		}

		textarea {
			height: 170rpx;
		}
	}
	.photo{
		width: 60%;
		display: flex;
		justify-content: space-between;
	}
	.uploadphoto{
		float: left;
		font-size: 26rpx;
	}
	.submit{
		width: 580rpx;
		margin:40rpx auto;
		height: 280rpx;
	}
</style>